<template>
    <!--   Datum页面 数据展示页面的 上传文件组件-->
    <div class="popup">
        <div class="pop-up">
            <div class="lala">
                <p>文件上传</p>
                <img src="../../assets/images/del(2).png" alt="" @click="Hide">
            </div>
            <div class="shangchuan" style="position: relative">
                <div class="clearfix">
                    <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" class="xuanze">
                        选择文件 <input type="text">
                    </a-upload>
                    <div>文件类型 <input type="text" value="sss"></div>
                    <div>文件页数
                        <a-input-number :min="1" :max="100000000" :default-value="1" @change="onChange"
                                        style="width: 214px;height:32px;margin-left: 16px;margin-top: 0; border: 1px solid #979797;"/>
                    </div>
                    <div>信息名称 <input type="text"></div>
                    <div class="tree">
                        <p>组织结构</p>
                        <a-tree
                                v-model="checkedKeys"
                                checkable
                                :expanded-keys="expandedKeys"
                                :auto-expand-parent="autoExpandParent"
                                :selected-keys="selectedKeys"
                                :tree-data="treeData"
                                @expand="onExpand"
                                @select="onSelect"
                        />
                    </div>
                    <a-button
                            type="primary"
                            :disabled="fileList.length === 0"
                            :loading="uploading"
                            style="margin-top: 16px"
                            @click="handleUpload"
                    >
                        {{ uploading ? '上传中' : '点击上传' }}
                    </a-button>
                </div>
            </div>
            <!--           提示文字-->
            <div class="tishi">
                <p>提示</p>
                <p>1.文件最大支持30M</p>
                <p>2.支持文件格式</p>
                <p>3.选择本地文件上传即可</p>
            </div>
        </div>
    </div>
<!--    s-->
</template>

<script>
    const treeData = [
        {
            title: '0-0',
            key: '0-0',
            children: [
                {
                    title: '0-0-0',
                    key: '0-0-0',
                    children: [
                        {title: '0-0-0-0', key: '0-0-0-0'},
                        {title: '0-0-0-1', key: '0-0-0-1'},
                        {title: '0-0-0-2', key: '0-0-0-2'},
                    ],
                },
                {
                    title: '0-0-1',
                    key: '0-0-1',
                    children: [
                        {title: '0-0-1-0', key: '0-0-1-0'},
                        {title: '0-0-1-1', key: '0-0-1-1'},
                        {title: '0-0-1-2', key: '0-0-1-2'},
                    ],
                },
                {
                    title: '0-0-2',
                    key: '0-0-2',
                },
            ],
        },
        {
            title: '0-1',
            key: '0-1',
            children: [
                {title: '0-1-0-0', key: '0-1-0-0'},
                {title: '0-1-0-1', key: '0-1-0-1'},
                {title: '0-1-0-2', key: '0-1-0-2'},
            ],
        },
        {
            title: '0-2',
            key: '0-2',
        },
    ];

    import reqwest from 'reqwest';

    let popup = document.getElementsByClassName("popup")
    export default {
        name: 'upload',
        data() {
            return {
                expandedKeys: ['0-0-0', '0-0-1'],
                autoExpandParent: true,
                checkedKeys: ['0-0-0'],
                selectedKeys: [],
                treeData,
                la: true,
                headers: {
                    authorization: 'authorization-text',
                },
                fileList: [],
                uploading: false,
            }
        },
        watch: {
            checkedKeys(val) {
                console.log('onCheck', val);
            },
        },
        methods:{
            onExpand(expandedKeys)
            {
                console.log('onExpand', expandedKeys);
                // if not set autoExpandParent to false, if children expanded, parent can not collapse.
                // or, you can remove all expanded children keys.
                this.expandedKeys = expandedKeys;
                this.autoExpandParent = false;
            }
            ,
            onCheck(checkedKeys)
            {
                console.log('onCheck', checkedKeys);
                this.checkedKeys = checkedKeys;
            }
            ,
            onSelect(selectedKeys, info)
            {
                console.log('onSelect', info);
                this.selectedKeys = selectedKeys;
            }
            ,
            onChange(value)
            {
                console.log('changed', value);
            }
            ,
            Hide()
            {
                popup[0].style.display = "none"
            }
            ,
            handleRemove(file)
            {
                const index = this.fileList.indexOf(file);
                const newFileList = this.fileList.slice();
                newFileList.splice(index, 1);
                this.fileList = newFileList;
            }
            ,
            beforeUpload(file)
            {
                this.fileList = [...this.fileList, file];
                return false;
            }
            ,
            handleUpload()
            {
                const {fileList} = this;
                const formData = new FormData();
                fileList.forEach(file => {
                    formData.append('files[]', file);
                });
                this.uploading = true;

                // You can use any AJAX library you like
                reqwest({
                    url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
                    method: 'post',
                    processData: false,
                    data: formData,
                    success: () => {
                        this.fileList = [];
                        this.uploading = false;
                        console.log(this.fileList)
                        console.log(formData)
                        this.$message.success('文件上传成功');
                    },
                    error: () => {
                        this.uploading = false;
                        this.$message.error('文件上传失败');
                    },
                });
            }
            ,
        }
        ,
        components: {
        }
    }

</script>
<style scoped lang="less">
    .pop-up {
        width: 950px;
        height: 563px;

        background-color: rgba(255, 255, 255, 1);
    }

    .lala {
        width: 870px;
        height: 69px;
        margin: 0 auto;

        p {
            font-size: 16px;
            font-family: PingFangSC-Regular;
            color: #000000;
            opacity: 1;
            float: left;
            margin-top: 24px;
            cursor: default;
        }

        img {
            width: 20px;
            height: 20px;
            float: right;
            margin-top: 24px;
            cursor: pointer;
        }
    }

    .popup {
        position: absolute;
        top: 0;
        left: 0;
        width: 1440px;
        height: 875px;
        background: rgba(0, 0, 0, 0.32);
        box-sizing: border-box;
        padding: 150px;
        padding-left: 304px;
        display: none;
    }

    /*上传的样式*/
    .shangchuan {
        width: 870px;
        height: 294px;
        border: 1px dashed rgba(151, 151, 151, 1);
        margin: 0 auto;
    }

    /*    提示*/
    .tishi {
        width: 870px;
        margin: 0 auto;

        p {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            line-height: 22px;
            color: #000000;
            opacity: 1;
            margin-top: 12px;
        }
    }
</style>
